<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-button
        type="primary"
        @click="handleAdd">添加</el-button>
      <!--列表-->
      <el-row>
        <el-col :span="6" v-for="station in stationList" :key="station.serialNum">
          <div class="station-list">
            <div class="title"><p>工位{{ station.serialNum }}</p></div>
            <div class="pc">
              <img src="../assets/manage/pic_computer.png"/>
            </div>
            监控终端{{station.terminal.serialNum}}
            <div>
            pc列表
            <i v-for="pc in station.pcList">
              {{pc.serialNum}}
            </i>
            </div>
            <el-button style="float: right"
              size="small"
              @click="handleMonitor(station.id)">查看进度</el-button>
          </div>
        </el-col>
      </el-row>

      <el-dialog title="添加工位" :visible.sync="dialogFormVisible" size="small">
        <el-form :model="selectTable">
          <el-form-item label="工位号">
            <el-input v-model="selectTable.serialNum"></el-input>
          </el-form-item>
          <el-form-item label="监控终端列表(未分配)">
            <el-select v-model="selectTable.termSelect">
              <el-option
                v-for="item in termOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="PC列表">
            <el-transfer
              :titles="['未分配PC', '已选择PC']"
              v-model="selectTable.pcSelect" :data="pcOptions"></el-transfer>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="createStation">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="进度查看"
        :visible.sync="dialogMFormVisible"
      >
        <el-table :data="MList.data" highlight-current-row v-loading="loading" style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="仿真状态">
                  <span v-for="i in props.row.sim">
                    <div>{{ i.name }}:{{i.value}}</div>
                  </span>
                </el-form-item>
                <el-form-item label="硬件状态">
                  <span v-for="i in props.row.real">
                    <div>{{ i.name }}:{{i.data}}</div>
                  </span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="member" label="成员" sortable>
          </el-table-column>
          <el-table-column label="进度" sortable>
            <template slot-scope="props"><el-progress :percentage=props.row.step width="50px"></el-progress></template>
          </el-table-column>

        </el-table>


        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogMFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="freshTask">刷新</el-button>
  </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
  //  import {baseUrl, baseImgPath} from '@/config/env'
  import {getUnTermList, getUnPcList, stationList, createStation, getVerifyResultR} from '@/api/api'
  export default {
    data () {
      return {
        stationList: [],
        selectTable: {
          serialNum: '',
          termSelect: '',
          pcSelect: []
        },
        MList: {},
        dialogFormVisible: false,
        dialogMFormVisible: false,
        termOptions: [],
        pcOptions: [],
        UnPcList: [],
        selectIndex: null
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    methods: {
      // 获取设备列表
      async initData () {
        this.loading = true
        this.selectTable = {
          serialNum: '',
          termSelect: '',
          pcSelect: []
        } // 重置输入框内容
        try {
          stationList().then((res) => {
            this.stationList = res.data
            this.loading = false
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      async getMenu () {
        this.termOptions = []
        try {
          getUnTermList().then(res => {
            res.data.forEach((item, index) => {
              this.termOptions.push({
                label: item.serialNum,
                value: item.id,
                index
              })
            })
          })
        } catch (err) {
          console.log('获取设备名称失败', err)
        }
        this.pcOptions = []
        try {
          getUnPcList().then(res => {
            res.data.forEach((item, index) => {
              this.pcOptions.push({
                label: item.serialNum,
                key: item.id
              })
            })
          })
        } catch (err) {
          console.log('获取设备名称失败', err)
        }
      },
      handleAdd () {
        this.getMenu()
        this.dialogFormVisible = true
      },
      async createStation () {
        this.dialogFormVisible = false
        createStation(this.selectTable).then(res => {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.dialogFormVisible = false
          this.loading = false
          this.initData()
        })
      },
      handleMonitor (id) {
        this.dialogMFormVisible = true
        this.getMonitor(id)
      },
      async getMonitor (row) {
        this.MList = {}
        try {
          getVerifyResultR(row).then((res) => {
            this.MList = res.data
          })
        } catch (err) {
          console.log('获取设备名称失败', err)
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .el-button {
    margin: 5px;
  }
  .station-list {
    border: 1px solid #32be91;
    margin: 10px;
    height: 250px;
    background: #f8f8f8;
    /*width: 380px;*/
    .title {
      height: 35px;
      background: #32be91;
      color: white;
      p {
        padding: 5px;
      }
    }
    .pc {
      text-align: center;
      margin-top: 15px;
    }
  }
</style>
